<template>
	<view class="ml-footer-guider">
		<view class="guider-item" v-if="current !== 0" @click="handlePrev">
			<text class="iconfont icon-next"></text>
			<text>上一页</text>
		</view>
		<view v-else></view>
		<view class="guider-item guider-center">
			<text>{{ catalogs[current].title }}</text>
		</view>
		<view class="guider-item guider-end" v-if="current !== catalogs.length - 1" @click="handleNext">
			<text>下一页</text>
			<text class="iconfont icon-previous"></text>
		</view>
		<view v-else></view>
	</view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
	catalogs: {
		type: Array,
		default: []
	},
	modelValue: {
		type: Number,
		default: 0,
	}
});

const emit = defineEmits(['update:modelValue']);

const current = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		return emit('update:modelValue', val)
	}
});

const handlePrev = () => {
	current.value -= 1;
}

const handleNext = () => {
	current.value += 1;
}

</script>

<style lang="less" scoped>
.ml-footer-guider {
	display: grid;
	grid-template-columns: 120px auto 120px;
	align-items: center;
	font-size: 13rpx;
	color: #333;
	height: 30px;
}

.guider-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.guider-center {
	display: flex;
	justify-content: center;
}

.guider-end {
	justify-content: flex-end;
}

.iconfont {
	font-size: 30rpx;
}
</style>
